import { defineStore } from "pinia";

//1.定义并导出容器
//参数1：容器的ID，必须唯一，将来Pinia 会把所有的容器挂载到根容器
//参数2：选项对象
//返回值：一个函数，调用得到容器实例
export const useMainStore = defineStore("main", {
  /* 
  类似于组件的 methods,封装业务逻辑，修改state
  */
  actions: {
    changeState(num: number) {
      this.count += num;
      this.foo += "!";
      this.arr.push(4);

      // this.$patch((state) => {
      //   state.count++;
      //   state.foo += "!";
      //   state.arr.push(4);
      // });
    },
  },

  /* 
  类似于组件的 computed,封装计算属性，有缓存的功能
  */
  getters: {
    //函数接受一个可选参数：state状态对象
    // count10(state) {
    //   // console.log("count10被调用了");
    //   return state.count + 10;
    // },

    //如果在getters中使用了this则必须手动指定返回值的类型，否则类型推导不出来
    count10(): number {
      return this.count + 10;
    },
  },

  /* 
  类似于组件的 data,用来存储全局状态
  1.必须是函数，是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
  2.必须是箭头函数，为了更好的进行 TS 类型推导
  */
  state: () => {
    return {
      count: 100,
      foo: "bar",
      arr: [1, 2, 3],
    };
  },
});
